<template>
    <view class="uni-tabbar">
        <view class="uni-tabbar__item" v-for="(item,index) in tabbar" :key="index" @tap="changeTab(item)">
            <view class="uni-tabbar__bd">
                <view class="uni-tabbar__icon">
                    <image v-if="item.pagePath == pagePath" class="uni-w-42 uni-h-42" mode="aspectFit" :src="item.selectedIconPath"></image>
                    <image v-else class="uni-w-42 uni-h-42" mode="aspectFit" :src="item.iconPath"></image>
                </view>
            </view>
            <view class="uni-tabbar__label" 
			:style="[item.pagePath == pagePath ? {'color':selectedColor} : {'color':color}]"
			>
                {{item.text}}
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        props: {
            pagePath: null
        },
        data() {
            return {
                page: 'contact',
                showPage: false,
                containerHeight: 400,
				color:'#9A9A9A',
				selectedColor:'#FE7701',
                tabbar: [
                    {
                        "pagePath": "/pages/index/index",
                        "iconPath": "/static/tabBar/home.png",
                        "selectedIconPath": "/static/tabBar/sel_home.png",
                        "text": "首页",
                        "fontIcon": "icon-shouye"
                    },
					
					{
					    "pagePath": "/pages/zhibo/zhibo",
					    "iconPath": "/static/tabBar/zhibo.png",
					    "selectedIconPath": "/static/tabBar/sel_zhibo.png",
					    "text": "区跑直播",
					    "fontIcon": "icon-wode"
					},
					{
					    "pagePath": "/pages/order/index",
					    "iconPath": "/static/tabBar/order.png",
					    "selectedIconPath": "/static/tabBar/sel_order.png",
					    "text": "订单记录",
					    "fontIcon": "icon-wode"
					},
                    {
                        "pagePath": "/pages/my/index",
                        "iconPath": "/static/tabBar/my.png",
                        "selectedIconPath": "/static/tabBar/sel_my.png",
                        "text": "我的",
                        "fontIcon": "icon-wode"
                    }
                ]
            };
        },
        mounted() {
            // true为判断条件，根据实际的需求替换即可
            // if(false) {
            //     this.tabbar.splice(1,0,
            //         {
            //             "pagePath": "/pages/tabBar/manage/manage",
            //             "iconPath": "/static/tabBar/home.png",
            //             "selectedIconPath": "/static/tabBar/home_col.png",
            //             "text": "管理",
            //             "fontIcon": "icon-guanli"
            //         }
            //     )
            // }
        },
        methods: {
            changeTab(item) {
				console.log(item)
                this.page = item.pagePath;
　　　　　　　　　　// 这里使用reLaunch关闭所有的页面，打开新的栏目页面
                uni.reLaunch({
                    url: this.page
                });
            },
        }
    }
</script>

<style lang="scss" scoped>

    [nvue] uni-scroll-view, [nvue] uni-swiper-item, [nvue] uni-view {
        flex-direction: unset;
    }
    [nvue-dir-column] uni-swiper-item, [nvue-dir-column] uni-view {
        flex-direction: unset;
    }
    .uni-tabbar {
        position: fixed;
        bottom: 0;
        z-index: 99999;
        width: 100%;
        display: flex;
        justify-content: space-around;
        height: 100rpx;
        padding: 14rpx 0;
        box-sizing: border-box;
        background-color: #fff;
        box-shadow: 0rpx 6px 13px 1px #878787;
        .uni-tabbar__item {
            display: block;
            line-height: 72rpx;
            font-size: 20rpx;
            text-align: center;
        }
        .uni-tabbar__icon {
            height: 44rpx;
            line-height: 44rpx;
            text-align: center;
			image{
				width: 40rpx;
				height: 44rpx;
			}
        }
        .icon {
            display: inline-block;
        }
        .uni-tabbar__label {
            line-height: 28rpx;
            font-size: 20rpx;
            color: #9A9A9A;
			font-weight: 600;
			text-align: center;
            &.active {
                color: #FE7701;
            }
        }
    }
</style>